<template>
  <div id="app-container" style="margin: 10px 50px">
    <el-form :inline="true" :model="student" class="demo-form-inline">
      <el-form-item label="学生姓名">
        <el-select
          filterable
          v-model="FormData.studentId"
          placeholder="学生姓名"
        >
          <el-option
            v-for="item in student.optionsStu"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="default" @click="clear">清空</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="logInfo" stripe style="width: 100%">
      <el-table-column prop="studentName" label="学生姓名"> </el-table-column>

      <el-table-column prop="authString" label="日志状态"> </el-table-column>

      <el-table-column prop="grade" label="成绩"> </el-table-column>

      <el-table-column label="操作" width="230" align="center">
        <template slot-scope="scope">
          <el-button @click="gradeShow(scope.row)" type="danger"
            >评分</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="curPage"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-input
        type="text"
        placeholder="请输入成绩"
        v-model="grade"
        maxlength="10"
        show-word-limit
      >
      </el-input>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeGreade">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import teacherApi from "@/api/teacher";
import studentApi from "@/api/student";
import logApi from "@/api/log";
import gradeApi from "@/api/grade";

export default {
  data() {
    return {
      textarea: "",
      curPage: 1,
      pageSize: 3,
      total: 0,
      dialogVisible: false,
      student: {
        optionsStu: [],
      },
      FormData: {
        studentId: "",
        status: 1,
        teacherId: "",
      },
      logInfo: [],
      row: {},
      grade: "",
    };
  },
  create() {},
  mounted() {
    this.init();
  },
  methods: {
    changeGreade() {
      gradeApi.changeGrade(this.row.id, this.grade).then((resp) => {
        this.$message.success("评分成功！");
        // 查询所有的日志记录（当前教师下面所有学生的日志）
        gradeApi
          .pageList(this.pageSize, this.curPage, this.FormData)
          .then((resp) => {
            this.logInfo = resp.data.list;
            this.total = resp.data.total;
          });
      });
      this.dialogVisible = false;
    },
    show(row) {
      this.row = row;
      console.log(row);
    },
    init() {
      // 查询所有的日志记录（当前教师下面所有学生的日志）
      gradeApi
        .pageList(this.pageSize, this.curPage, this.FormData)
        .then((resp) => {
          this.logInfo = resp.data.list;
          this.total = resp.data.total;
        });
      // 搜索栏学生信息填充
      studentApi.getPackageStudentInfo().then((resp) => {
        this.student.optionsStu = resp.data.list;
      });
    },
    onSubmit() {
      gradeApi
        .pageList(this.pageSize, this.curPage, this.FormData)
        .then((resp) => {
          this.logInfo = resp.data.list;
          this.total = resp.data.total;
        });
    },
    clear() {
      this.FormData = {};
      this.FormData.status = 1;
      gradeApi
        .pageList(this.pageSize, this.curPage, this.FormData)
        .then((resp) => {
          this.logInfo = resp.data.list;
          this.total = resp.data.total;
        });
    },
    gradeShow(row) {
      this.row = row;
      console.log(this.row, "row");
      this.dialogVisible = true;
    },
    // 关闭评分的创口
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    // 页数发生变化
    handleCurrentChange() {
      gradeApi
        .pageList(this.pageSize, this.curPage, this.FormData)
        .then((resp) => {
          this.logInfo = resp.data.list;
          this.total = resp.data.total;
        });
    },
  },
};
</script>

<style></style>
